import React, { Component } from 'react'

class Child extends Component {

  // 组件从页面消失了（销毁了）
  componentWillUnmount () {
    /**
     * 作用：
     * 1. 清除定时器
     * 2. 清除事件绑定
     */
    console.log('组件从页面消失了（销毁了）')
  }


  render () {
    return (
      <div>
        <h2>子组件</h2>
      </div>
    )
  }
}



class App extends Component {
  constructor(props) {
    super(props)
    // 只执行一次
    /**
     * 作用：
     * 1. 初始化state
     * 2. 事件处理函数绑定this（bind）
     */
    this.state = {
      count: 0,
      isShow: true
    }
    console.log('1.执行constructor()')
  }


  // 组件挂载到页面后执行=》vue=》created
  componentDidMount () {
    // 只执行一次
    /**
     * 作用：
     * 1. 操作DOM
     * 2. 发送ajax请求
     */
    console.log('3.执行componentDidMount()')
  }

  /**
   * 组件更新完触发
   * @param {*} prevProps 上一次的props
   * @param {*} prevState 上一次的state 
   */
  componentDidUpdate (prevProps, prevState) {
    console.log('4.执行componentDidUpdate()', prevProps, prevState)
    /**
     * 作用：
     * 1. 操作DOM
     * 2. 发送网络请求
     * 不能直接setState()
     */
    // if (prevState.count < 3) {
    //   this.setState({
    //     count: this.state.count + 1
    //   })
    // }
  }


  add = () => {
    this.setState({
      count: this.state.count + 1,
      // 控制组件是否显示
      isShow: !this.state.isShow
    })
  }

  addForce = () => {
    // 强制更新
    this.forceUpdate()
  }



  // 模版
  render () {
    // 多次执行
    console.log('2.执行render()')
    const { count, isShow } = this.state
    // 执行更新=》错误
    // this.setState({
    //   count: 2
    // })
    return (
      <div>
        <h1>生命周期</h1>
        <p>{count}</p>
        <button onClick={this.add}>触发更新</button>
        <button onClick={this.addForce}>强制更新</button>
        <hr />
        {
          isShow ? <Child /> : null
        }
      </div>
    )
  }
}

export default App